<template>
  <div class="login">
     <div class="arrow" @click="tui()"></div>
   
    <div class="title">
       <h3>短信验证码登录</h3> 
    </div>  
    <div class="detail">
      <div class="hao">
        <input type="text" placeholder="手机号码">
      </div>
      <div class="yan">
        <input type="text" placeholder="验证码">
        <button>获取验证码</button>
      </div>
      <div class="btn">
      登录

      </div>
      <div class="t">
        <span>账号密码登录</span>
        <span>新用户注册</span>
      </div>


    </div>
    <div class="qita">
      <img src="h/qita.png"/>
      <div class="img">
        <a href=""> <img src="h/qq.png" /></a>
       
        <a href=""><img src="h/zfb.png" /></a>
      </div>
      <p class="tips">
           登录代表您阅读并同意
           <span>《E宠商城用户协议》</span>
    </p>
    </div>
    

  </div>
</template>

<script>
export default {
    methods:{
      tui(){
        this.$router.go(-1)
      }
    }
}
</script>

<style lang="scss" scoped>
  .login{
    width: 100%;
 
      .arrow{
        
        margin: .2rem .15rem;
        width: .15rem;
        height: .15rem;
        border-top: .01rem solid #999;
        border-left: .01rem solid #999;
        transform: rotate(-45deg);

    }
    .title{
      width: 100%;
      // height: 
      padding: .1rem .3rem;
      h3{
        width: 2.95rem;
        height: .32rem;
        margin-top: .05rem;
        font-size: .24rem;
      }
    }
    .detail{
      width: 100%;
      // height: 
      
      padding: .1rem .3rem;
      .yan,.hao{
        border-bottom: .01rem solid #ccc;
         margin-bottom: .1rem;
      }
      input{
        // width: 2.9rem;
        padding-left: .1rem;
        height: .45rem;
        border: none;
        
        line-height: .48rem;
       
      }
      .yan>button{
          border-radius: .2rem;
          width: .9rem;
          height: .28rem;
          line-height: .28rem;
          text-align: center;
          color: #41C856;
          //  lay:block;
          font-size:14px;
          -webkit-transform:scale(0.8);
          background-color: #fff;
              border: solid 1px #41C856;
      }
      .btn{
        width: 100%;
        margin-top: .3rem;
        height: .5rem;
        background-color: #f0f0f0;
        color:#bfbfbf ;
            line-height: 50px;
            text-align: center;
            border-radius: 40px;
animation-delay: 0.5s;
    animation-duration: 0.7s;
      }

      .t{
        width: 100%;
        height: .25rem;
        line-height: .25rem;
        font-size: .12rem;
        color: #333;
        span{
          display: block;
        }
        span:nth-child(1){
          float: left;
        }
        span:nth-child(2){
          float: right;
        }
      }
    }
    .tips{
      position: absolute;
      font-size: .12rem;
      line-height: .4rem;
      height: .4rem;
      // width: 100%;
      color: #333;
      bottom: -.1rem;
      left: .7rem;
      text-align: center;
      span{
        // margin-left: .1rem;
        color: red;
      }
    }
    .qita{
      width: 100%;
      margin-top: 1rem;
    padding: 0 .3rem;
    // height: .36rem;
    padding-bottom: .4rem;
     position: relative;
      img{
        width: 100%;
      }
      .img{
        width: 100%;
       
        padding: 0 .3rem;
    // height: .36rem;
    overflow: hidden;
         text-align: center;
        a{
          width: 50%;
          display: block;
          height: .36rem;
          float: left;
         margin-top: .2rem;
        }
        img{
          width: .3rem;
          height: .36rem;
        }
      }
    }



  }
</style>